<template>
  <div class="app">
    <div class="box">
      <div class="filter-table-data">
        <a :class="{'active' : active === index}" v-for="(item, index) in filters" :key="index" @click="changeActive(index)">
          60-69岁：232人(40%）
        </a>
      </div>
      <a-table
        class="ant-table-striped"
        :columns="columns"
        :dataSource="dataSource"
        :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      ></a-table>
    </div>
    <div>
        <Right></Right>
    </div>   
  </div>

</template>

<script setup lang="ts">
import Right from '../../components/right/index.vue'
import { ref } from 'vue'
const columns = [
  {
    title: '老人姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '身份证号',
    dataIndex: 'idCard',
    key: 'idCard',
  },
  {
    title: '家庭住址',
    dataIndex: 'addr',
    key: 'addr'
  }
]
const filters = [
  '60-69岁：232人(40%）', '70-79岁：298人(40%）', '80-89岁：112人(40%）', '90-99岁：9人(3%）', '100-109岁：1人(1%）'
]
const active = ref(0)
const changeActive = (index: number) => {
  active.value = index
}
const dataSource = [
  {
    key: 1,
    name: '耿影',
    phone: '15700160885',
    idCard: '220987199809096367',
    addr: '台州市临海市大洋街道大洋西路147号'
  },
  {
    key: 2,
    name: '谢瑗',
    phone: '14448525094',
    idCard: '220987199809096392',
    addr: '台州市临海市大洋街道大洋西路147号'
  },
  {
    key: 3,
    name: '大薇',
    phone: '18083825768',
    idCard: '220987199809096408',
    addr: '台州市临海市大洋街道大洋西路147号'
  },
  {
    key: 4,
    name: '隋蓓江',
    phone: '15664602106',
    idCard: '220987199809096830',
    addr: '台州市临海市大洋街道大洋西路147号'
  },
  {
    key: 5,
    name: '暴福',
    phone: '15789085103',
    idCard: '220987199809096839',
    addr: '台州市临海市大洋街道大洋西路147号'
  },
  {
    key: 6,
    name: '杜胜瑗',
    phone: '15447794774',
    idCard: '220987199809096675',
    addr: '台州市临海市大洋街道大洋西路147号'
  },
  {
    key: 7,
    name: '毛国承',
    phone: '18982666034',
    idCard: '220987199809096210',
    addr: '台州市临海市大洋街道大洋西路147号'
  },
  {
    key: 8,
    name: '经轮',
    phone: '18031698158',
    idCard: '220987199809096924',
    addr: '台州市临海市大洋街道大洋西路147号'
  },
  {
    key: 9,
    name: '毛国承',
    phone: '18982666034',
    idCard: '220987199809096210',
    addr: '台州市临海市大洋街道大洋西路147号'
  },
  {
    key: 10,
    name: '经轮',
    phone: '18031698158',
    idCard: '220987199809096924',
    addr: '台州市临海市大洋街道大洋西路147号'
  },
  {
    key: 11,
    name: '隋蓓江',
    phone: '15664602106',
    idCard: '220987199809096830',
    addr: '台州市临海市大洋街道大洋西路147号'
  },
  {
    key: 12,
    name: '暴福',
    phone: '15789085103',
    idCard: '220987199809096839',
    addr: '台州市临海市大洋街道大洋西路147号'
  },
]
</script>

<style lang="less" scoped>
.ant-table-striped :deep(.table-striped), .ant-table-striped :deep(.ant-table-thead tr th) {
  background-color: rgba(#3563AE, 0.04);
}
.app{
  display: flex;
}
.box {
  width: 1340px;
  height: 850px;
  // background: #FFFFFF;
  background: #fff;
  margin-right: 30px;
  padding: 12px 20px;
  box-sizing: border-box;
}
.filter-table-data {
  margin-bottom: 34px;
  a {
    margin-right: 30px;
    color: #333;
    &.active {
      color: #2965E0;
    }
  }
}
</style>